<template>
  <div class="orderList orderLayout">
    <div class="content">
      <div class="nav-bar">
        <ul>
          <li
            :class="{ active: currentStatus == 'completed' }"
            @click="changeStatus('completed')"
          >
            已支付
          </li>
          <li
            :class="{ active: currentStatus == 'tobepay' }"
            @click="changeStatus('tobepay')"
          >
            待支付
          </li>
        </ul>
      </div>
      <div v-show="currentStatus == 'completed'">
        <div class="list" v-if="completedList.length > 0">
          <div class="list-item" v-for="item in completedList ">
            <div class="product">
              <div class="thumb">
                <img
                  :src="item.items[0].pImg"
                  v-if="item.items[0].pImg&&item.items[0].pImg.length > 10"
                />
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1207_product1.jpg"
                  v-else
                />
              </div>
              <div class="detail">
                <li class="fz16 gray">{{ item.items[0].pName }}</li>
                <li class="address">
                  <span>快递地址</span><span>{{ item.detailAddress }}</span>
                </li>
              </div>
            </div>
            <div class="amount gray">
              <span
                ><span class="fz12">购买数量</span>&nbsp;&nbsp;<span
                  class="fz16"
                  >{{ item.items[0]["quantity"] }}</span
                ></span
              >
              <span
                ><span class="fz12">实付金额&nbsp;&nbsp;&yen;</span
                ><span class="fz16">{{ item["realAmount"] }}</span></span
              >
            </div>
            <div class="amount_detail">
              <span
                >总金额&nbsp;&nbsp;{{
                  item["amount"]
                }}&nbsp;&nbsp;&nbsp;&nbsp;</span
              >
              <!-- <span>使用积分&nbsp;&nbsp;{{ item["credit"] }}</span> -->
            </div>
            <div class="handle">
              <li>
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/online.png"
                  class="icon"
                />{{ item.payType == 200 ? "线上支付" : "线下支付" }}
              </li>
              <li>
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/clock.png"
                  class="icon"
                />{{ item.createTime | unixToDate(true, true) }}
              </li>
            </div>
          </div>
        </div>
        <div v-else style="text-align: center" class="list null">
          <span>这里还没有订单记录哦！</span>
          <!-- <div v-if="!isSendingRequest" class="loadingBox">
              <mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>
            </div> -->
        </div>
      </div>
      <div v-show="currentStatus == 'tobepay'">
        <div class="list" v-if="tobepayList.length > 0">
          <div class="list-item" v-for="item in tobepayList">
            <div class="product">
              <div class="thumb">
                <img
                  :src="item.items[0].pImg"
                  v-if="item.items[0].pImg&&item.items[0].pImg.length > 10"
                />
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1207_product1.jpg"
                  v-else
                />
              </div>
              <div class="detail">
                <li class="fz16 gray">{{ item.items[0].pName }}</li>
                <li class="address">
                  <span>快递地址</span><span>{{ item.detailAddress }}</span>
                </li>
              </div>
            </div>
            <div class="amount gray">
              <span
                ><span class="fz12">购买数量</span>&nbsp;&nbsp;<span
                  class="fz16"
                  >{{ item.items[0]["quantity"] }}</span
                ></span
              >
              <!-- <span
                ><span class="fz12">实付金额</span>&nbsp;&nbsp;&yen;<span
                  class="fz16"
                  >{{ item.items[0]["realAmount"] }}</span
                ></span
              > -->
            </div>
            <div class="amount_detail">
              <span
                >总金额&nbsp;&nbsp;{{
                  item["amount"]
                }}&nbsp;&nbsp;&nbsp;&nbsp;</span
              >
              <!-- <span>使用积分&nbsp;&nbsp;{{ item["credit"] }}</span> -->
            </div>
            <div class="handle">
              <li>
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/clock.png"
                  class="icon"
                />{{ item.createTime | unixToDate(true, true) }}
              </li>
              <li
                class="delBtn"
                @click="pay(item.id)"
                v-if="item.payType == 200"
              >
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/payAgain.png"
                />
              </li>
              <li v-else>
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/online.png"
                  class="icon"
                />线下支付
              </li>
              <li class="delBtn" @click="cancelOrder(item.id)">
                <img
                  src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/delBtn.png"
                />
              </li>
            </div>
          </div>
        </div>
        <div v-else style="text-align: center" class="list null">
          <span>这里还没有订单记录哦！</span>
        </div>
      </div>

      <!-- </div> -->
      <div style="text-align: center; margin-top: 1.3rem">
        <img
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/buy2.png"
          @click="orderPre()"
          style="width: 15.3rem"
        />
        <!-- <img
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/invite.png"
          class="handleBtn"
          @click="share()"
        /> -->
      </div>
    </div>
    <share-pop :show.sync="showPop"></share-pop>
  </div>
</template>
<script>
import { Toast, MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import { showPay } from "service/wxpayment";
import sharePop from "components/sharePop";
import { wxshare } from "common/mixin";

export default {
  mixins: [wxshare],
  data() {
    return {
      currentStatus: "completed",
      typeCode: 2,
      orderList: {
        completed: [],
        tobepay: [],
      },
      completedList:[],
      tobepayList:[],
      isSendingRequest: true,
      showPop: false,
    };
  },
  components: { sharePop },
  methods: {
    ...mapActions({
      GetOrderList: "GetOrderList",
      CancelOrder: "CancelOrder",
      GetPayCharge: "GetPayCharge",
    }),
    changeStatus: function (status) {
      if (status == this.currentStatus) return;
      this.currentStatus = status;
      this.typeCode = status == "completed" ? 2 : 1;
      this.getOrderList();
    },
    getOrderList: function () {
      this.isSendingRequest = true;
      this.GetOrderList({ type: this.typeCode })
        .then((result) => {
          this.orderList[this.currentStatus] = result.data.beanList;
          if(this.typeCode==2){
            this.completedList  = result.data.beanList;
          }
          if(this.typeCode==1){
            this.tobepayList  = result.data.beanList;
          }
          this.isSendingRequest = false;
        })
        .catch(() => {
          this.isSendingRequest = false;
        });
    },
    cancelOrder: function (orderId) {
      MessageBox.prompt("请输入取消原因")
        .then(({ value, action }) => {
          console.log("value", value, "action", action);
          this.CancelOrder({ orderId: orderId, reason: value }).then(
            (result) => {
              this.getOrderList();
            }
          );
        })
        .catch(() => {});
    },
    sucCb() {
      this.$router.push({ path: "/orderSucc" });
    },
    errCb() {
      this.$router.push({ path: "/orderErr" });
    },
    // 购买页面
    orderPre: function () {
      this.$router.push({ path: "/orderPre" });
    },
    share: function () {
      this.showPop = true;
    },
    pay: function (orderId) {
      let self = this;
      self
        .GetPayCharge({
          orderId: orderId,
        })
        .then(
          (res) => {
            showPay(res, self.sucCb, self.errCb);
          },
          (err) => {}
        );
    },
  },
  mounted() {
    this.getOrderList();
  },
};
</script>
<style lang="less">
@import "./orderList.less";
@import "./orderPre.less";
.mint-msgbox-input {
  input {
    height: 2rem;
  }
}
</style>
